<template>
    <div class="studentlist">
        <el-form :inline="true" :model="formInline" class="demo-form-inline" size="small">
            <el-form-item>
                <el-input v-model="formInline.name" placeholder="搜索姓名"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="find">查询</el-button>
                <el-button type="primary" @click="reset">重置</el-button>
            </el-form-item>
        </el-form>

        <div class="table">
            <el-table :data="table" border style="width: 100%">
                <el-table-column prop="name" label="姓名" align: center> </el-table-column>
                <el-table-column prop="age" label="年龄" align: center> </el-table-column>
                <el-table-column prop="sex_text" label="性别" align: center> </el-table-column>
                <el-table-column prop="class" label="班级" align: center> </el-table-column>
                <el-table-column prop="state_text" label="状态" align: center> </el-table-column>
                <el-table-column prop="address" label="地址" align: center> </el-table-column>
                <el-table-column prop="phone" label="联系电话" align: center> </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button type="danger" icon="el-icon-delete" circle size="mini"
                            @click="delStudent(scope.row)"></el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <!-- <button @click="getdata"></button> -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
            :page-sizes="[5, 10, 20]" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
</template>

<script>
import { students, delstuent } from "@/api/index.js"
export default {
    data() {
        return {
            tableData: [],
            currentPage: 1, //当前页
            pagesize: 5,    //每页几条
            total: 0,   //总条数
            formInline: {
                name: ''
            }
        }
    },
    created() {
        this.getData();
    },
    computed: {
        table() {
            return this.tableData.slice((this.currentPage - 1) * this.pagesize, this.currentPage * this.pagesize)
        }
    },
    methods: {
        //获取数据渲染列表
        getData(params) {
            students(params).then((res) => {
                console.log(res.data);
                this.tableData = res.data.data
                this.total = res.data.data.length
                this.tableData.forEach(val => {
                    val.sex === 1 ? val.sex_text = '男' : val.sex_text = '女'
                    val.state === '1' ? val.state_text = '已入学' : val.state === '2' ? val.state_text = '未入学' : val.state_text = '休学中'
                })
            });
        },
        handleSizeChange(val) {
            this.pagesize = val
            this.currentPage = 1
        },
        handleCurrentChange(val) {
            this.currentPage = val
        },
        delStudent(row) {
            delstuent(row.id).then(res => {
                console.log(res.data);
                if (res.data.status === 200) {
                    this.getData();
                    this.$message({ message: '删除成功', type: 'success' });
                }
            })
        },
        find(){
            this.getData(this.formInline)
        },
        reset(){
            this.formInline = {}
            this.getData()
        }
    }

}
</script>

<style scoped lang="less">
.studentlist {
    height: 100%;
    width: 100%;

    .table {
        height: 386px;
        overflow: auto;
    }

    /deep/ .el-table .cell {
        text-align: center;
        ;
    }

    .el-pagination {
        margin-top: 10px;
    }
    .el-form{
        text-align: left;
        margin-top: 10px;
    }
}
</style>
